import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

// 为啥创建一个请求实例
// 因为后端接口可能不止一个，这样可以创建多个实例，互不影响
const request = axios.create({
  // 实际工作中，开发和线上肯定不是一个接口，要根据环境区分，npm run dev，加载开发环境的变量 .env.development，上线打包会加载 .env.production
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

request.interceptors.request.use((config) => {
  const token = store.getters.token
  if (token) config.headers['Authorization'] = `Bearer ${token}`
  // !一定不要忘记 return config
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(function(res) {
  // !如果是二进制，直接返回
  if (res.data instanceof Blob) return res.data
  // 这儿返回啥，请求得到结果就是啥
  const { success, data, message } = res.data
  if (success) {
    return data
  } else {
    Message.error(message)
    // 业务错了，也要返回一个错误的 Promsie
    return Promise.reject(new Error(message))
  }
}, function(error) {
  if (error.response.status === 401) {
    // Token 过期
    // !#1 错误提示
    Message.warning(error.response.data.message)
    // !#2 退出登录（清除 token 和用户信息）
    store.dispatch('user/logout')
    // !#3 跳转到登录页
    router.push('/login')
    // !#4 返回一个错误的 Promise
    return Promise.reject(error)
  }
  Message.error(error.message)
  return Promise.reject(error)
})

export default request

